<script>
import request from "@/utils/request"
import store from "@/store"
import { userActionType } from "@/store/modules/user"
import { showToast } from "@/utils"

export default {
  name: "index",
  props: {
    reason: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      promise: {
        resolve: null,
        reject: null,
      },
    }
  },
  methods: {
    open() {
      return new Promise((resolve, reject) => {
        // 判断用户是否有绑定手机号码，绑定了就直接resolve
        store.dispatch(userActionType.action.userInfo).then((userInfo) => {
          if (userInfo && userInfo.phone) {
            resolve()
            return
          }
					this.promise.resolve = resolve
					this.promise.reject = reject
					this.$refs.popup.open()
				})
      })
    },
    // 绑定手机号码
    handleBindPhone(e) {
      return new Promise(async (resolve, reject) => {
        try {
          //用户拒绝授权获取手机号码或者获取手机号码
          if (!e || !e.detail || !e.detail.code) {
            reject()
            return
          }
          uni.showLoading({
            title: "加载中",
          })
          //发送请求绑定手机号码
          await request({
            url: "userinfo/bindMemberPhone",
            data: {
              code: e.detail.code,
            },
          })
          //刷新用户信息
          await store.dispatch(userActionType.action.refreshUserInfo)
          uni.hideLoading()
          resolve()
          this.$refs.popup.close()
          this.promise.resolve()
        } catch (e) {
          uni.hideLoading()
          console.log(e, "error")
          showToast.error(e)
          reject()
        }
      })
    },
  },
}
</script>

<template>
  <uni-popup type="bottom" ref="popup" :is-mask-click="false">
    <view class="popup-content">
      <view class="reason">
        {{ reason }}
        <slot></slot>
      </view>
      <view class="auth-banner">
        <view class="label">申请获取以下权限</view>
        <view class="value">
          <text>• 获取您的手机号码</text>
        </view>
      </view>
      <view class="footer-btn">
        <view
          class="reject-btn btn"
          @click="
            () => {
              promise.reject()
              $refs.popup.close()
            }
          "
          >拒绝</view
        >
        <button class="agree-btn btn" open-type="getRealtimePhoneNumber" @getrealtimephonenumber="handleBindPhone">同意</button>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-content {
  background: #fff;
  padding: 60rpx;
  border-radius: 30rpx 30rpx 0 0;
  > .reason {
    font-size: 32rpx;
    line-height: 1.5;
  }
  > .auth-banner {
    margin-top: 30rpx;
    background: #eeeeee;
    padding: 20rpx;
    border-radius: 10rpx;
    > .label {
      font-size: 28rpx;
      color: var(--text-color-light);
    }
    > .value {
      font-size: 28rpx;
      margin-top: 10rpx;
    }
  }
  > .footer-btn {
    margin-top: 60rpx;
    display: flex;
    > .btn {
      width: 0;
      flex: 1;
      &:not(:last-child) {
        margin-right: 100rpx;
      }
      text-align: center;
      padding: 20rpx 0;
      font-size: 32rpx;
      border-radius: 10rpx;
    }
    > .reject-btn {
      background: #eeeeee;
    }
    > .agree-btn {
      background: var(--theme-color);
      color: #fff;
      line-height: 1;
    }
  }
}
</style>
